


/**
 * 1.需求: canvas背景
 */

//调用
CanvasParticle({
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 2,	//小球高宽，其实为正方形，所以不宜太大 
    width: 2,
    count: 200,		//点个数
    // color: "121, 162, 185", 	//点颜色
    color: "200,193,193", 	//点颜色
    // stroke: "130,255,255", 		//线条颜色
    // stroke: "240,250,228", 		//线条颜色
    stroke: "0,0,0", 		//线条颜色
    dist: 6000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 10 	//点到点最大连接数

  });


/* 楼层滚动--设置滚动条距离它网页顶部的距离 */


  let aside=document.querySelector('.aside')
  let asideLi=document.querySelectorAll('.aside li')
  let floor=document.querySelectorAll('.floor')

/* 2.窗口滚动时，判断当前滚动距离 大 于等于400，将floor设置为固定定位，否则相对定位*/
window.addEventListener('scroll',function(){

  //获取滚动距离

  let sTop=document.documentElement.scrollTop
//判断
  if(sTop>=400){
    aside.classList.add('asidePositon') //用类名设置--添加类名
  }else{
    aside.classList.remove('asidePositon')//移出类名
    
  }

})


/* 点击aside下的li标签  设置滚动距离 ==li对应的楼层距离网页顶部的间距 */

let index=0;//定义变量来保存

asideLi.forEach(function(dom,i){
  dom.addEventListener('click',function(){

    //清除之前的激活样式
    asideLi[index].classList.remove('active')
    //给当前对象添加激活样式
    this.classList.add('active')

    index=i

    let setTop=floor[i].offsetTop  //元素距离浏览器窗口的距离offsetTop
    //设置滚动距离
    window.scrollTo({
      top:setTop,
      behavior:'smooth'
    })

  })
})

